<script setup lang='ts'>
import { ref } from 'vue'
enum SizeEnum {
    S = "s",
    M = "m",
    L = "l",
    XL = "xl",
    XXL = "xxl",
    XXXL = "xxxl"
}

const showAvatar = ref(true)
// 定义一个变量 尺寸的变量
const sizeData = ref<SizeEnum>(SizeEnum.S)
const changeSize = () => {
    if (sizeData.value === SizeEnum.S) {
        sizeData.value = SizeEnum.M
    }
    else if (sizeData.value === SizeEnum.M) {
        sizeData.value = SizeEnum.L
    }
    else if (sizeData.value === SizeEnum.L) {
        sizeData.value = SizeEnum.XL
    }
    else if (sizeData.value === SizeEnum.XL) {
        sizeData.value = SizeEnum.XXL
    }
    else if (sizeData.value === SizeEnum.XXL) {
        sizeData.value = SizeEnum.XXXL
    }
    else {
        sizeData.value = SizeEnum.S
    }
}
</script>

<template>
    <div class="container">
        <h1>测试条件渲染v-show</h1>
        <img v-show="showAvatar" class="avatar"
            src="https://img1.baidu.com/it/u=4148564018,1930444022&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500" alt="头像">
        <button @click="showAvatar = !showAvatar">v-show显示/隐藏</button>
        <img v-if="showAvatar" class="avatar"
            src="https://img2.baidu.com/it/u=6183387,1958309347&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800" alt="" />
        <button @click="showAvatar = !showAvatar">v-if显示/隐藏</button>
        <h1>v-if和v-else-if和v-else</h1>
        <img v-if="sizeData" class="clothes"
            src="https://img0.baidu.com/it/u=4229123141,3324233996&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1069">
        <h2 v-if="sizeData === SizeEnum.S">小孩的尺码</h2>
        <h2 v-else-if="sizeData === SizeEnum.M">大孩的尺码</h2>
        <h2 v-else-if="sizeData === SizeEnum.L">青年的尺码</h2>
        <h2 v-else-if="sizeData === SizeEnum.XL">正常的尺码</h2>
        <h2 v-else-if="sizeData === SizeEnum.XXL">微胖的尺码</h2>
        <h2 v-else>老高的尺码</h2>
        <h2>{{ sizeData }}</h2>
        <button @click="changeSize">v-if改变型号</button>
    </div>

</template>

<style scoped>
.container {
    margin: 20px auto;
    width: 100%;
    text-align: center;
}

.avatar {
    width: 100px;
    height: 100px;
    border-radius: 50px;
}

.clothes {
    width: 200px;
    height: 300px;
}
</style>